<template>
  <van-dropdown-menu>
    <van-dropdown-item v-model="value" :options="options" />
    <van-dropdown-item title="筛选" ref="item">
      <van-cell center title="全部">
        <template #right-icon>
          <van-switch v-model="switch1" size="24" active-color="#ee0a24" />
        </template>
      </van-cell>
      <van-cell center title="IMAX厅">
        <template #right-icon>
          <van-switch v-model="switch2" size="24" active-color="#ee0a24" />
        </template>
      </van-cell>
      <van-cell center title="杜比全景声厅">
        <template #right-icon>
          <van-switch v-model="switch3" size="24" active-color="#ee0a24" />
        </template>
      </van-cell>
      <van-cell center title="DTS:X 临境音厅">
        <template #right-icon>
          <van-switch v-model="switch4" size="24" active-color="#ee0a24" />
        </template>
      </van-cell>
      <van-cell center title="120帧/4K厅">
        <template #right-icon>
          <van-switch v-model="switch5" size="24" active-color="#ee0a24" />
        </template>
      </van-cell>
      <van-cell center title="ALPD Pro高亮厅">
        <template #right-icon>
          <van-switch v-model="switch6" size="24" active-color="#ee0a24" />
        </template>
      </van-cell>
      <div style="padding: 5px 16px">
        <van-button type="danger" block round @click="onConfirm">
          确认
        </van-button>
      </div>
    </van-dropdown-item>
  </van-dropdown-menu>
</template>

<script>
import { defineComponent } from 'vue'
import { ref } from 'vue'
export default defineComponent({
  setup() {
    const item = ref(null)
    const value = ref(0)
    const switch1 = ref(false)
    const switch2 = ref(false)
    const switch3 = ref(false)
    const switch4 = ref(false)
    const switch5 = ref(false)
    const switch6 = ref(false)
    const options = [
      { text: '全部', value: 0 },
      { text: '万达影城', value: 1 },
      { text: '西海岸', value: 2 },
      { text: '利群华谊影院 ', value: 3 },
      { text: '横店影院', value: 4 },
      { text: '金逸影城', value: 5 },
      { text: 'CGV影城', value: 6 },
      { text: '万达影城', value: 7 },
      { text: '万象影城', value: 8 },
      { text: '幸福蓝海国际影城', value: 9 },
      { text: '新世纪电影城', value: 10 },
      { text: '大商影城', value: 11 }
    ]
    const onConfirm = () => {
      item.value.toggle()
    }

    return {
      item,
      value,
      switch1,
      switch2,
      switch3,
      switch4,
      switch5,
      switch6,
      options,
      onConfirm
    }
  }
})
</script>

<style lang="scss" scoped></style>
